 <template>
  <!-- 详细内容页面 -->
  <div id="container">
    <el-collapse v-model="activeNames" v-loading="loading">
      <el-collapse-item title="基本信息" name="1">
        <customer-detail ref="detail" :data="customerDetail"></customer-detail>
      </el-collapse-item>
      <el-collapse-item title="跟进记录" name="2">
        <follow-record-list
          ref="followRecordList"
          :list="customerDetail.followList"
        ></follow-record-list>
      </el-collapse-item>
      <el-collapse-item title="成交记录" name="3">
        <contract-list
          ref="contractList"
          :list="customerDetail.contractList"
        ></contract-list>
      </el-collapse-item>
      <el-collapse-item title="产品" name="4">
        <product-list
          ref="productList"
          :list="customerDetail.goodsList"
        ></product-list>
      </el-collapse-item>
      <el-collapse-item title="审批流程" name="5">
        <check-process
          ref="checkProcess"
          :id="$route.query.id"
          :type="10"
        ></check-process>
      </el-collapse-item>
    </el-collapse>
    <auth-buttons
      :info="{ type: 10, mainId: $route.query.id }"
      @updatePage="updatePage"
    ></auth-buttons>
  </div>
</template>
<script>
import customerDetail from './components/customerDetail.vue'
import followRecordList from './components/followRecordList.vue'
import contractList from './components/contractList.vue'
import productList from './components/productList.vue'
import checkProcess from '@/components/checkProcess/checkList'
import authButtons from '@/components/authButtons'
export default {
  name: 'detail',
  data () {
    return {
      activeNames: ['1'],
      checkCofig: [],
      loading: false,
      customerDetail: {}
    }
  },
  components: {
    customerDetail,
    followRecordList,
    contractList,
    productList,
    checkProcess,
    authButtons
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    async getDetail () {
      this.loading = true
      let { data } = await this.$API.customer.getCustomerById.get({ id: this.$route.query.id })
      console.log(data)
      this.loading = false
      this.customerDetail = data
      this.activeNames.push('5')
    },
    updatePage () {
      this.getDetail()
      this.$refs.detail.relodPart()
      this.$refs.checkProcess.relodPart()
    }
  }
}
</script>
<style lang='scss' scoped>
#container {
  margin: 10px;
  :deep(.el-collapse-item__header) {
    padding-left: 20px;
    font-size: 16px;
  }
  :deep(.el-collapse-item__content) {
    padding: 0 20px 20px 20px;
  }
  :deep(.el-form-item) {
    margin-bottom: 5px;
  }
  :deep(.el-form-item__label) {
    color: #999;
  }
}
</style>